﻿<%@ Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<Sisocana.Core.Models.ImagenAsociadoModel>" %>


    <script src="<%: Url.Content("~/Scripts/jquery-ui-1.8.11.js") %>" type="text/javascript"></script>
    <link href="<%: Url.Content("~/Content/themes/base/jquery.ui.all.css") %>" rel="stylesheet" type="text/css" />

    <script language="javascript" type="text/javascript">
        $(document).ready(function () {
            $("p a, input:submit,input:file ").button();
        });
    </script>


<script src="<%: Url.Content("~/Scripts/jquery.validate.min.js") %>" type="text/javascript"></script>
<script src="<%: Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js") %>" type="text/javascript"></script>
<link rel="stylesheet" media="screen" type="text/css" href="<%: Url.Content("~/Content/colorpicker/css/colorpicker.css") %>" />
<script type="text/javascript" src="<%: Url.Content("~/Content/colorpicker/js/colorpicker.js") %>"></script>
<script type="text/javascript">
    $(document).ready(function () {   
    
   

    $('#BackgroundShellColor').ColorPicker({
	onSubmit: function(hsb, hex, rgb, el) {
		$(el).val('#'+ hex);
		$(el).ColorPickerHide();
	},
    onChange: function (hsb, hex, rgb, el) {
		$('#BackgroundShellColor').css('backgroundColor', '#' + hex);
        $('#BackgroundShellColor').css('color', '#' + hex);
        $('#BackgroundShellColor').val('#' + hex);
	},
	onBeforeShow: function () {
		$(this).ColorPickerSetColor(this.value);
	},

    }).bind('keyup', function(){
	    $(this).ColorPickerSetColor(this.value);
    });
    col = $('#BackgroundShellColor').val();
    $('#BackgroundShellColor').css('width', 40).css('color', col ).css('backgroundColor',col);




    $( "#slider-heigth2" ).slider({
			range: "min",			
			min: 20,
			max: 1000,
			change: function( event, ui ) {
				$( "#lheigth2" ).text("Heigth "+ $( "#slider-heigth2" ).slider( "value" ) + "px");
                $( "#heigth" ).val($( "#slider-heigth2" ).slider( "value" ) );
               
			},
            create: function( event, ui ) {
				var valor =$( "#heigth" ).val();
                $( "#slider-heigth2" ).slider( "option", "value", valor );
			}
		});
        $( "#lheigth2" ).text("Heigth "+ $( "#slider-heigth2" ).slider( "value" ) + "px");
        $( "#heigth" ).val($( "#slider-heigth2" ).slider( "value" ) );

     $( "#slider-width2" ).slider({
			range: "min",			
			min: 60,
			max: 1000,
			change: function( event, ui ) {
				$( "#lwidth2" ).text("Width "+ $( "#slider-width2" ).slider( "value" ) + "px");
                $( "#width" ).val($( "#slider-width2" ).slider( "value" ) );
               
			},
            create: function( event, ui ) {
				var valor =$( "#width" ).val();
                $( "#slider-width2" ).slider( "option", "value", valor );
			}
		});
        $( "#lwidth2" ).text("Width "+ $( "#slider-width2" ).slider( "value" ) + "px");
        $( "#width" ).val($( "#slider-width2" ).slider( "value" ) );

    $( "#slider-amount2" ).slider({
			range: "min",			
			min: 0,
			max: 25,
			change: function( event, ui ) {
				$( "#lcantVisualizar2" ).text("Display Amount "+ $( "#slider-amount2" ).slider( "value" ) + " elements");
                $( "#cantVisualizar" ).val($( "#slider-amount2").slider( "value" ) );
               
			},
            create: function( event, ui ) {
				var valor =$( "#cantVisualizar" ).val();
                $( "#slider-amount2" ).slider( "option", "value", valor );
			}
            
		});
        $( "#lcantVisualizar2").text("Display Amount " + $( "#slider-amount2").slider( "value" ) + " elements");
        $( "#cantVisualizar").val($( "#slider-amount2").slider( "value" ) );
    


    });

</script>

<% Html.EnableClientValidation(); %>


<% using (Html.BeginForm()) { %>
    <%: Html.ValidationSummary(true) %>
        
        <fieldset>
        <legend>Imagen Gallery Customization</legend> 
        <%:Html.HiddenFor(model => model.idSitio) %>
        <%:Html.HiddenFor(model => model.id) %>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.ImagenAsociadoName,"Image Content Name") %>
        </div>
        <div class="editor-field">
            <% = Html.DropDownList("ImagenAsociadoName")%>         
        </div>
        <div class="editor-label">
            <%: Html.LabelFor(model => model.photoGallery)%>
        </div>
        <div class="editor-field">
            <% = Html.DropDownList("photoGallery")%>         
        </div>
        
        <div class="editor-label">
            <%: Html.LabelFor(model => model.tagBusqueda) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.tagBusqueda) %>
            <%: Html.ValidationMessageFor(model => model.tagBusqueda) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.apiKey) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.apiKey) %>
            <%: Html.ValidationMessageFor(model => model.apiKey) %>
        </div>

        <div class="editor-label">
            <%: Html.LabelFor(model => model.appSecret) %>
        </div>
        <div class="editor-field">
            <%: Html.EditorFor(model => model.appSecret) %>
            <%: Html.ValidationMessageFor(model => model.appSecret) %>
        </div>

        <div class="editor-label">
            <label id="lcantVisualizar2" ></label>
        </div>
        <div class="editor-field">
            <%: Html.HiddenFor(model => model.cantVisualizar) %>
            <div id="slider-amount2" class="customSlider"></div>           
            
        </div>
        </fieldset>
        <fieldset>
        <legend>Visual Customization</legend>   
              <div class="editor-field">
                <%: Html.HiddenFor(model => model.width)%>
                <label id="lwidth2" ></label>                
            </div>
            <div id="slider-width2" class="customSlider"></div>
            
            <div class="editor-field">
                <%: Html.HiddenFor(model => model.heigth)%> 
                <label id="lheigth2" ></label>
            </div>
            <div id="slider-heigth2" class="customSlider"></div>
            <div class="editor-label">
                <%: Html.LabelFor(model => model.BackgroundShellColor) %>
            </div>
            <div class="editor-field">
                <%: Html.EditorFor(model => model.BackgroundShellColor)%>
                <%: Html.ValidationMessageFor(model => model.BackgroundShellColor)%>
            </div>
    </fieldset>
        <p>
            <% if (Model.tagBusqueda == null || Model.tagBusqueda.Equals(""))
               {%>
                    <input type="submit" value="Create" />
             <%}
               else
               {%>
                <input type="submit" value="Update" />
            <% } %>
        </p>

<% } %>

<%--<div>    
    (or perhaps you want to <%: Html.ActionLink("load a bunch of images", "UploadImages", new { id = Model.idSitio })%>)
</div>--%>
<div>    
    (or perhaps you want to <%: Html.ActionLink("load a bunch of images", "Conf", new { idsitio = Model.idSitio,tab=6 })%>)
</div>